<template>
  <div style="height: 100%;display: flex;">
    <div style="height: 100%;flex: 3">
      <h3 style="text-align: center">项目信息</h3>
      <div style="padding: 10px">
        <a-descriptions layout="vertical"
                        :data="data"
                        bordered />
      </div>
    </div>
    <div style="height: 100%;flex: 1;border-left: 2px solid #999;padding-left: 5px">
      <h4>开发时间轴
        <a-button style="margin: 0 5px" type="primary" size="small" @click="switchReverse">切换升降序</a-button>
      </h4>
      <a-scrollbar type="track" style="height: 80vh;width:100%;overflow: auto;">
        <div style="width: 100%;">
          <a-timeline :reverse="isReverse">
            <a-timeline-item label="2024-05-15">创建项目</a-timeline-item>
            <a-timeline-item label="2024-05-16">前端-引入ArcoDesignUI库</a-timeline-item>
            <a-timeline-item label="2024-05-16">前端-路由页面编写</a-timeline-item>
            <a-timeline-item label="2024-05-17">前端-页面布局</a-timeline-item>
            <a-timeline-item label="2024-05-20">前端-前端Axios封装</a-timeline-item>
            <a-timeline-item label="2024-05-21">后端-创建项目</a-timeline-item>
            <a-timeline-item label="2024-05-22">后端-构建架构</a-timeline-item>
            <a-timeline-item label="2024-05-22">后端-编写Hash核心类</a-timeline-item>
            <a-timeline-item label="2024-05-29">后端-整合pinyin4j</a-timeline-item>
            <a-timeline-item label="2024-05-29">后端-编写核心业务逻辑</a-timeline-item>
            <a-timeline-item label="2024-06-05">后端-编写接口并调试</a-timeline-item>
            <a-timeline-item label="2024-06-20">前后端联调</a-timeline-item>
            <a-timeline-item label="2024-06-20">设计不同的散列函数并测试冲突率</a-timeline-item>
          </a-timeline>
        </div>
      </a-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">

import { ref } from 'vue'

const data = [
  {
    label: '项目名称',
    value: '基于自定义散列函数的电话簿管理系统'
  },
  {
    label: '课程名称',
    value: '数据结构和算法设计'
  },
  {
    label: '项目创建日期',
    value: '2024-5-17'
  },
  {
    label: '小组成员',
    value: '杨武-范宝荣-谭中琳-代鹏-孟鑫良-张俊伟'
  }

]

let isReverse = ref(false)
let switchReverse = () => {
  isReverse.value = !isReverse.value
}


</script>